<template>
	<view class="app My-Message">
		<AppNavbar :bgColor="'transparent'" leftIconColor="black" title="Message" titlecolor="black" :fontWeight="600">
		</AppNavbar>
		<template v-if="!state.queryParams.noData">
			<up-swipe-action>
				<up-swipe-action-item v-for="(item,index) in state.messageList" :key="index" :options="state.options1"
					@click="click" :name="item.userMessageId">
					<view class="My-Message-item ">

						<p class="f-size-14 font-weight-600">{{item.messageHeadline}}</p>
						<p class="t-end f-size-12">{{item.createTime}}</p>
						<p class="f-size-12 pb-3">{{item.messageContent}}</p>
						<up-line></up-line>

					</view>
				</up-swipe-action-item>
			</up-swipe-action>

		</template>
		<template v-else>
			<up-empty mode="message" style="margin-top: 100rpx;" text="The message list is empty">
			</up-empty>
		</template>
	</view>
</template>

<script setup>
	import {
		getMessageListApi,
		delMessageApi
	} from '@/api/message.js'
	const state = reactive({
		messageList: [],
		options1: [{
			text: '删除'
		}],
		queryParams: {
			pageSize: 20,
			pageIndex: 1,
			messageType: 1,
			isRefresh: false,
			nextPage: true,
			noData: false
		}
	})
	const getList = async () => {
		state.queryParams.isRefresh = true
		const res = await getMessageListApi(state.queryParams)
		state.messageList = [...state.messageList, ...res.data.list]
		if (state.messageList.length === res.data.total) {
			state.queryParams.nextPage = false
		}
		if (state.messageList.length === 0) {
			state.queryParams.noData = true
		}
		state.queryParams.isRefresh = false

	}
	const click = async (data) => {
		console.log("data", data);
		const res = await delMessageApi({
			ids: data.name
		})
		if (res.code === 200) {
			uni.tools.showTips('delete success')
			state.messageList.splice(data.index,1)
			if(state.messageList.length===0){
				state.queryParams.noData = true
			}
		}
	}
	onMounted(() => {
		getList()
	})
</script>

<style lang="scss">
	.My-Message {
		.My-Message-item {
			// box-sizing: content-box !important;
			// border: 1px solid red;
			margin: 0 30rpx;

			:last-child {
				color: #7D7D7D;
			}
		}

		::v-deep .u-swipe-action-item {
			margin-top: 20rpx;
		}
	}
</style>